<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--添加移动端界面使用配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <!--添加semantic的css依赖-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <!--<link rel="stylesheet" href="./static/css/semantic.css">-->
    <!--引入自己的样式-->
    <link rel="stylesheet" href="./static/css/me-css.css">
</head>
<body>
<!--导航栏-->
<nav class="ui inverted attached segment me-menu-padding-min">
    <!--添加导航组件-->
    <div class="ui container">
        <div class="ui  menu secondary inverted stackable">
            <h2 class="ui teal header item me-padding-item me-item">blog</h2>
            <a href="#" class="item me-padding-item me-mobile-hidden me-item"><i
                    class="home mini icon me-padding-icon"></i>首页 </a>
            <a href="#" class="item me-padding-item me-mobile-hidden me-item"><i
                    class="idea mini icon me-padding-icon"></i>分类 </a>
            <a href="#" class="item me-padding-item me-mobile-hidden me-item"><i
                    class="clone mini icon me-padding-icon"></i>归档</a>
            <a href="#" class="item me-padding-item me-mobile-hidden me-item"><i
                    class="tags mini icon me-padding-icon"></i>标签 </a>
            <a href="#" class="item me-padding-item me-mobile-hidden me-item"><i
                    class="info mini icon me-padding-icon"></i>关于我 </a>
            <div class="right item me-mobile-hidden me-item">
                <div class="ui icon input transparent inverted">
                    <input type="text" placeholder="搜索">
                    <i class="ui search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <!--手机端显示图标-->
    <a href="#" class="ui icon button  black me-right-top me-mobile-show menu-toggle">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--中间部分-->
<div class="m-padded-tb-large m-padded-tb-big">
    <div class="ui container">
        <div class="ui segments ">
            <div class="ui segment top attached">
                <div class="ui link list horizontal">
                    <div class="ui item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="头像" class="ui avatar image">
                        <div class="ui content">月下独酌</div>
                    </div>
                    <div class="ui item">
                        <i class="ui calendar icon"></i>2020/05/31
                    </div>
                    <div class="ui item">
                        <i class="ui eye icon"></i>
                        420
                    </div>
                </div>
            </div>
            <!--文章图片-->
            <div class="ui segment attached">
                <img src="https://i.picsum.photos/id/129/4910/3252.jpg" alt="博客图片" class="ui rounded image">
            </div>
            <!--文章内容-->
            <div class="ui segment attached">
                <div class="ui segment right aligned basic">
                    <div class="ui orange label basic">原创</div>
                </div>
                <h2 class="ui header center aligned">
                    投资理财
                </h2>
                <br>
                <div class="me-padding-lr-responsive m-padded-tb-large">
                    <p class="me-text-space me-text-line">
                        这个世界充满了谎言和欺骗，真理应该只是掌握在少数人手中，大多数人穷其一生可能也不知道世界究竟是怎么的。很多关于股票的书籍、文章和各种信息中，一样充满了虚假的欺骗信息，形形色色的人依靠着欺骗和被欺骗来形成一个食物链。当然，确实有一些品德高尚的人，无私地将自己的经验告诉了众人，但是我们会很悲哀地发现，如果我们没到一定的层次，这些真正有用的经验，我们虽然也许看见过了许多遍，但每一次我们都会像扔垃圾一样地把它扔到一边，等有一天通过不断的努力和挫折后，我们才发现自己走了一条曲折的路。是的，我们走了好久，结果才发现回到了起点。蓦然回首，那人却在灯火阑珊处，这应该是人生游戏中设计好的规则，股市和人生一样，一直在不断地转圈，从起点回到起点，生生不息。
                    </p>
                </div>
                <!--标签-->
                <div class="ui me-padding-lr-responsive segment basic">
                    <a href="#" class="ui label teal basic  left pointing me-label-right-margin">方法论</a>
                    <a href="#" class="ui label teal basic  left pointing me-label-right-margin">幸福生活</a>
                </div>
                <!--赞赏-->
                <div class="ui segment center aligned  basic">
                    <button class="ui button orange  circular payButton">赞赏</button>
                </div>
                <!--自己写的样式-->
                <!--<div class="ui container  center aligned">-->
                <!--<div class="ui label basic">-->
                <!--<div class="ui images " style="font-size: inherit !important;">-->
                <!--<div class="ui image">-->
                <!--<img src="./static/images/oneStar.jpg" alt="支付宝" class="ui image  rounded bordered"-->
                <!--style="width: 110px">-->
                <!--<div class="ui">支付宝</div>-->
                <!--</div>-->
                <!--<div class="ui image">-->
                <!--<img src="./static/images/oneStar.jpg" alt="微信" class="ui image rounded bordered"-->
                <!--style="width: 110px">-->
                <!--<div class="ui">微信</div>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
                <div class="ui flowing transition hidden payQR popup" >
                    <div class="ui label basic">
                        <div class="ui images " style="font-size: inherit !important;">
                            <div class="ui image">
                                <img src="./static/images/oneStar.jpg" alt="支付宝" class="ui image  rounded bordered "
                                     style="width: 110px">
                                <div class="ui">支付宝</div>
                            </div>
                            <div class="ui image">
                                <img src="./static/images/oneStar.jpg" alt="微信" class="ui image rounded bordered"
                                     style="width: 110px">
                                <div class="ui">微信</div>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
            <div class="ui message  positive attached">
                <div class="ui grid stackable middle aligned">
                    <div class="ui eleven wide column">
                        <div class="ui segment basic">
                            <ul class="list">
                                <li>作者：月下独酌（联系作者）</a></li>
                                <li>发表时间：2017-10-02 09:08</span></li>
                                <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                                <li>公众号转载：请在文末添加作者公众号二维码（公众号二维码见右边，欢迎关注）</li> 
                            </ul> 
                        </div>
                        
                        
                    </div>
                    <div class="ui five wide column bordered">
                        <div class="ui segment basic">
                            <img src="./static/images/oneStar.jpg" alt="名片" class="ui image  rounded bordered right floated" style="width: 110px">
                        </div>
                    </div>
                </div> 
            </div>
            <div class="ui segment attached bottom">
                <div class="ui teal segment">
                    <div class="ui comments">
                        <h3 class="ui dividing header">Comments</h3>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Matt</a>
                                <div class="metadata">
                                    <span class="date">Today at 5:42PM</span>
                                </div>
                                <div class="text">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Elliot Fu</a>
                                <div class="metadata">
                                    <span class="date">Yesterday at 12:30AM</span>
                                </div>
                                <div class="text">
                                    <p>This has been very useful for my research. Thanks as well!</p>
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                            <div class="comments">
                                <div class="comment">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005">
                                    </a>
                                    <div class="content">
                                        <a class="author">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date">Just now</span>
                                        </div>
                                        <div class="text">
                                            Elliot you are always so right :)
                                        </div>
                                        <div class="actions">
                                            <a class="reply">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005">
                            </a>
                            <div class="content">
                                <a class="author">Joe Henderson</a>
                                <div class="metadata">
                                    <span class="date">5 days ago</span>
                                </div>
                                <div class="text">
                                    Dude, this is awesome. Thanks so much
                                </div>
                                <div class="actions">
                                    <a class="reply">回复</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--评论表单-->
                    <div class="ui form">
                        <div class="ui field" >
                            <textarea name="content" placeholder="请输入评论信息.."></textarea>
                        </div>
                        <div class="ui fields">
                            <div class="ui field me-margin-bottom-mini me-mobile-width">
                                <div class="ui icon input">
                                    <i class="ui user icon"></i>
                                    <input type="text" name="nickname" placeholder="姓名">
                                </div>
                            </div>
                            <div class="ui field me-margin-bottom-mini me-mobile-width">
                                <div class="ui input icon left">
                                    <i class="ui icon mail"></i>
                                    <input type="text"  name="email" placeholder="邮箱">
                                </div>
                            </div>
                            <div class="ui field me-margin-bottom-mini me-mobile-width">
                                <button class="ui teal button me-mobile-width"><i class="ui edit icon"></i>发布</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!--尾部部分-->
<footer class="ui inverted segment attached me-padding-footer">
    <div class="ui container center aligned">
        <div class="ui grid divided inverted stackable">
            <div class="three wide column">
                <img src="./static/images/oneStar.jpg" alt="微信二维码" style="width: 100px;margin: auto"
                     class="ui rounded image">
            </div>
            <div class="ui three wide column">
                <h4 class="ui inverted header me-text-space me-text-thin">
                    个人博客
                </h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户信息</a>
                    <a href="#" class="item">用户信息</a>
                    <a href="#" class="item">用户信息</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header me-text-space me-text-thin">
                    个人博客
                </h4>
                <div class="ui inverted link list me-text">
                    <a href="#" class="item ">用户信息</a>
                    <a href="#" class="item">用户信息</a>
                    <a href="#" class="item">用户信息</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header me-text-line me-text-space me-text-thin">
                    个人博客
                </h4>
                <p class="me-opacity-min me-text-thin me-text-line">
                    这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...
                </p>
            </div>
        </div>
        <div class="ui inverted section divider">
        </div>
        <p class="ui me-text-thin me-text-space me-opacity-tiny">
            Copyright © 2016 - 2017 Lirenmi Designed by 月下独酌
        </p>
    </div>
</footer>
<!--添加jquery依赖-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--添加semantic的js依赖-->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
<!--导航栏点击事件-->
    $(".menu-toggle").click(function () {
        $(".me-item").toggleClass("me-mobile-hidden");
    })
//  支付点击事件
    $(".payButton").popup({
        popup: $(".payQR"),
        on: "click",
        position:"bottom center" 
    })
</script>
</body>
</html>